<template>
		<view class="tabs">	
			<view class="list">
				<view class="tablist">
					<view
						 v-for="item in reciveTabs" :key="item.cateId"
						:class="['item',item.isActive==1?'active':'']" 
						@click="clickActive(item.cateId)"
					>
					    <text >{{item.cateName}}</text>
					
					</view>
				</view>
			</view>
				
				<view class="content" >
					<slot :tablist="Product"></slot>
				</view>

		</view> 
		
</template>

<script>
	
	import {createNamespacedHelpers} from "vuex"
	const {mapState,mapMutations,mapActions} = createNamespacedHelpers("mall");
	
	export default {
		props:["reciveTabs"],
		name:"mall-tab",
		data() {
			return {
				isActive:1,
				tablist:[]
			};
		},
		computed:{
			...mapState(["Product"])
		},
		
		created:function(){
			// console.log(5656,this.$props.reciveTabs);
			const val=uni.getStorageSync("Id")
			 let val2= JSON.parse(val)
			this.clickActive(val2)
		},
		methods:{
			...mapMutations(["setProduct"]),
			...mapActions(["getProductlist"]),
			

			clickActive:function(e){
				this.$emit("isActive",e)
				 this.getProductlist(e);
			}
		}
		
	}
</script>

<style lang="scss" scoped>
		.tabs{
			width: 100%;
			height: 100vh;
			display: flex;
			.list{
				width: 33%;
				height: 100%;
				border-right: 2rpx solid #f0f0f0;
				.tablist{
					width: 100%;
					height:100rpx;
					.item{
					    width: 100%;
					    height:100rpx;
					    line-height: 100rpx;
					    text-align: center;
						color: #555555;
						border-top: 2rpx solid #f0f0f0;
					    &.active{
					        color: #ff5500;
							font-weight: 550;
							-moz-box-shadow: inset 0 0 10px #CCC;
							-webkit-box-shadow: inset 0 0 10px #CCC;
							box-shadow: inset 0 0 10px #CCC;
					    }
						
					}
				}
			}
			
				
				.content{
					width: 66%;
					height: 1000rpx;
				}
				
							
		    
		}
	
		
</style>
